<template>
	<div id="head">
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<a class="mr-1 py-1" href="javascript:;" style="color:#28a745;">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
			</a>
			<a href="javascript:;" class="navbar-brand hidden-sm">Order点餐系统</a>
			<ul class="navbar-nav">
				<li><router-link :to="{name:'homeLink'}" class="nav-link">主页</router-link></li>
				<li><router-link to="/menu" class="nav-link">菜单</router-link></li>
				<li><router-link to="/admin" class="nav-link">管理</router-link></li>
				<li><router-link to="/about" class="nav-link">关于我们</router-link></li>
				<li><router-link to="/music" class="nav-link">听会音乐</router-link></li>
			</ul>
			<ul class="navbar-nav ml-auto" v-show = "!$store.state.currentuser">
				<li><router-link to="/login" class="nav-link">登录</router-link></li>
				<li><router-link to="/regist" class="nav-link">注册</router-link></li>
			</ul>
			<ul class="navbar-nav ml-auto" v-show = "$store.state.currentuser">
				<li><a class="nav-link">{{$store.state.currentuser}}</a></li>
				<li><a @click ="loginOut" class="nav-link">退出</a></li></li>
			</ul>
		</nav>
	</div>
</template>

<script>
	export default{
		data(){
			return {

			}
		},
		created(){
			let user = this.$store.state.currentuser;
			let localuser = window.localStorage['_userName'];
			if (user == null) {
				this.$store.commit('checkLogin',localuser);
			}
		},
		computed:{
			// isLogin(){
			// 	return this.$store.state.isLogin;
			// },
		},
		methods:{
			loginOut(){
				window.localStorage.removeItem("_userName");
				// 提交一个Out方法到vuex中执行
				this.$store.commit('Out');
			}
		}
	};
</script>
<style type="text/css" scoped>
	a.router-link-active{
		color: #28a745!important;
	}
</style>